<template>
  <div class="box">
    <div class="header">
      <div style="width:86px;
                  height:86px;
                  background:linear-gradient(90deg,rgba(131,175,247,1),rgba(255,255,255,1));
                  opacity:0.2;
                  border-radius:50%;
                  position: absolute;
                  left: 180px;
                  top: -27px;"></div>
      <div style="width:66px;
                  height:66px;
                  background:linear-gradient(90deg,rgba(131,175,247,1),rgba(255,255,255,1));
                  opacity:0.2;
                  border-radius:50%;
                  position: absolute;
                  right: 14.5px;
                  top: -8px;"
                  ></div>
      <div style="width:76.5px;
                  height:79px;
                  background:linear-gradient(90deg,rgba(131,175,247,1),rgba(255,255,255,1));
                  opacity:0.2;
                  border-radius:50%;
                  position: absolute;
                  left: 298.5px;
                  top: 43.5px"
                  ></div>

      <div class="touWrap">
          <img src="" alt=""  style="width:100%;height:100%;border:none" >
          <span  v-if="this.$route.query.name.length < 3" style="position:absolute;left:50%;top:50%;transform: translate(-50%,-70%);width:100px"> 
          {{((this.$route.query.name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}
          </span >
          <span  v-if="this.$route.query.name.length >= 3" style="position:absolute;left:50%;top:50%;transform: translate(-50%,-70%);width:100px">
            {{((this.$route.query.name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}
          </span>
        </div> 
      <div style="height:56px;color:#fff;position: absolute;right:81px;top:25px;">
        <span style="font-weight:400;">我的徽章</span><br>
        <span style="font-size:12px;font-weight:400;">My badge</span><br>
        <span style="font-size:13px;font-weight:800;height:30px">{{this.$route.query.name }}</span>
      </div>
    </div >
    <img src="@/static/badge/Dividing line@2x.png" alt="" style="width:1px;height:10px;position: relative;top: 31px;">
    <van-tabs @change="getBadge">
      <van-tab title="基础" name="a">
        <div class="content">
          <van-grid :border="false" :column-num="3" style="margin:0 3 0px" >
          <van-grid-item v-for="item in Badgelist" :key="item.name">
            <div  v-if="item.num >=2" style="position: absolute;right: 4px;top: 20px;">
              <img src="@/static/badge/ditiao@2x.png" style="width:22px;height:10px" alt="">
              <span style="position: relative;left: -50%;top:-2px;font-size: 10px;color: #fff;">x{{item.num}}</span>     
            </div>
            <div>
              <img :src="item.logo" style="width:56px;height:60px"/>
              <br>
              <span style="font-size:11px">{{item.name}}</span>
            </div>
          </van-grid-item>
          </van-grid>
        </div>
        </van-tab>
      <van-tab title="成长" name="b">
        <div class="content">
          <van-grid :border="false" :column-num="3" style="margin:0 3 0px"  >
          <van-grid-item v-for="item in Levellist" :key="item.name">
            <div v-if="item.num >=2" style="position: absolute;right: 4px;top: 20px;">
              <img src="@/static/badge/ditiao@2x.png" style="width:22px;height:10px" alt="">
              <span style="position: relative;left: -50%;top:-2px;font-size: 10px;color: #fff;">x{{item.num}}</span>  
            </div>
            <div>
              <img :src="item.logo" style="width:56px;height:60px"/>
              <br>
              <span style="font-size:11px">{{item.name}}</span>
            </div> 
          </van-grid-item>
          </van-grid>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import{Grid, GridItem, Tab, Tabs } from 'vant'
export default {
  data(){
    return{
      Badgelist:[],
      Levellist:[],
      name:this.name,
      icon:{
        gj:"",
        yj:"",
        jj:"",
      }
    }
  },
  created(){
    this.getBg()
      dd.biz.navigation.setTitle({
        title:"徽章列表"//控制标题文本，空字符串表示显示默认文本
      });
  },
  methods: {
    async getBadge(name){
      if(name == 'a'){
      let userId = localStorage.getItem("userId");
        let corpId = localStorage.getItem("custid");
       const res = await this.$http.get(
        `yuepoints/getBadge?corpId=${corpId}&userId=${userId}`
      );
      this.Badgelist = res.data.data
     }else if(name == 'b'){
       let userId = localStorage.getItem("userId");
         let corpId = localStorage.getItem("custid");
       const res = await this.$http.get(
        `yuepoints/getLevel?corpId=${corpId}&userId=${userId}`
      );
      this.Levellist = res.data.data
     }
     
    },
   async getBg(){
      let userId = localStorage.getItem("userId");
        let corpId = localStorage.getItem("custid");
       const res = await this.$http.get(
        `yuepoints/getBadge?corpId=${corpId}&userId=${userId}`
      );
      this.Badgelist = res.data.data
      

    }
    
  },
  components: {
    [Grid.name]:Grid,
    [GridItem.name]: GridItem,
    [Tab.name]:Tab,
    [Tabs.name]: Tabs 
  }
  
}
</script>
<style lang="less" scoped>
.box{
  height: 750px;
  background: #F8F8FA;
  font-size: 15px;
  font-family:PingFang SC;
  .header{
    position: relative;
    height:118px;
    background:linear-gradient(180deg,rgba(92,151,246,1) 33%,rgba(248,248,250,1) 100%);
    .touWrap{
      position:absolute;
      left:73px;
      top:13px;
      width:76px;
      height:84px;
      line-height: 68px;
      color: #fff;
      font-size: 16px
    }
  }
  /deep/.van-tab__text{
    font-weight: 500;
    font-size: 12px;
  }
  /deep/.van-tab--active{
    color: #5C97F6;
    font-weight: 500;
    font-size: 13px;
  }
  /deep/.van-tabs__nav{
    margin: 0 40px;
    background-color:transparent;
    /deep/.van-tabs__line{
      background-color:transparent
    }
  }
  .content{
  margin: 0 10px; 
  background: #fff;
  /deep/.van-grid{
    margin: 0 20px;
    }
  }
  
}
</style>
